<template>
  <div class="department">
    <PageSearch
      :search-config="searchConfig"
      @query-click="handleQueryClick"
      @reset-click="handleResetClick"
    ></PageSearch>
    <PageContent
      :content-config="contentConfig"
      ref="contentRef"
      @new-click="handleNewClick"
      @edit-click="handleEditClick"
    >
      <template #leader="scope">
        <span class="leader">我是领导:{{ scope.row[scope.prop] }}</span>
        <span>{{ scope.hName }}</span>
      </template>
      <template #parent="scope">
        <span class="parent">呵呵呵:{{ scope.row[scope.prop] }}</span>
      </template>
    </PageContent>
    <PageModal :modal-config="modalConfigRef" ref="modalRef"></PageModal>
  </div>
</template>

<script setup lang="ts" name="department">
import { ref, computed } from "vue";
import PageSearch from "@/components/PageSearch/PageSearch.vue";
import PageContent from "@/components/PageContent/PageContent.vue";
import PageModal from "@/components/PageModal/PageModal.vue";
import modalConfig from "./config/modal.config";

import searchConfig from "./config/search.config";
import contentConfig from "./config/content.config";
import useMainStore from "@/store/main/main";
import usePageContent from "@/hoooks/usePageContent";
import usePageModal from "@/hoooks/usePageModal";

// 对modalConfig进行操作
const modalConfigRef = computed(() => {
  const mainStore = useMainStore();
  const departments = mainStore.entireDepartments.map((item) => {
    return { label: item.name, value: item.id };
  });
  modalConfig.formItems.forEach((item) => {
    if (item.prop === "parentId") {
      item.options.push(...departments);
    }
  });

  return modalConfig;
});

//点击search,content的操作
const { contentRef, handleQueryClick, handleResetClick } = usePageContent();

// 点击content,modal的操作
const { modalRef, handleNewClick, handleEditClick } = usePageModal();
</script>
<style lang="less" scoped>
.leader {
  color: red;
}
.panent {
  color: blue;
}
</style>
